<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增部门</title>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/dept/dept.css}" rel="stylesheet">


    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-treetable/bootstrap-treetable.js}"></script>
    <script th:src="@{/js/layer/layer.min.js}"></script>
    <script th:src="@{/validate/jquery.validate.min.js}"></script>
    <script th:src="@{/validate/messages_zh.min.js}"></script>
    <script th:src="@{/validate/jquery.validate.extend.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/system/dept.js}"></script>

</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-dept-add">
        <!--/*@thymesVar id="dept" type="com.lzw.yin.domain.entity.Dept"*/-->
        <input id="treeId" name="parentId" type="hidden" th:value="${dept.deptId}">
        <div class="form-group">
            <label class="col-sm-3 control-label">上级部门：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <label for="treeName"></label><input class="form-control" type="text" onclick="selectDeptTree()"
                                                         id="treeName" readonly th:value="${dept.deptName}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">部门名称：</label>
            <div class="col-sm-8">
                <label for="deptName"></label><input class="form-control" type="text" name="deptName" id="deptName"
                                                     required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">显示排序：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="orderNum" required>
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">负责人：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="leader">
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">联系电话：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="phone">
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">邮箱：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="email">
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">部门状态：</label>
            <div class="col-sm-8">
                <div class="radio-box">
                    <div class="iradio-blue checked"><input type="radio" id="6"
                                                            name="status"
                                                            value="0"
                                                            checked="checked"
                                                            style="position: absolute; opacity: 0;">
                        <ins class="iCheck-helper"
                             style="position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; background: rgb(255, 255, 255); border: 0; opacity: 0;"></ins>
                    </div>
                    <label for="6">正常</label>
                </div>
                <div class="radio-box">
                    <div class="iradio-blue"><input type="radio" id="7"
                                                    name="status" value="1"
                                                    style="position: absolute; opacity: 0;">
                        <ins class="iCheck-helper"
                             style="position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; background: rgb(255, 255, 255); border: 0; opacity: 0;"></ins>
                    </div>
                    <label for="7" class="">停用</label>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    let formDeptAdd = $("#form-dept-add");

    $(function () {
        $(".iradio-blue").each(function () {
            $(this).on("click", function () {
                changeStatus($(this));
            });
        });
    })

    function add() {
        if (formDeptAdd.validate().form()) {
            $.ajax({
                cache: true,
                type: "POST",
                url: "/dept/add",
                data: formDeptAdd.serialize(),
                async: false,
                error: function () {
                    layer.alert("系统错误", {
                        icon: "2",
                        title: "系统提示",
                        btn: ['确认'],
                        btnclass: ['btn btn-primary'],
                    });
                }, success: function (result) {
                    if (result.code !== 0) {
                        layer.alert(result.msg, {
                            title: "系统提示",
                            btn: ['确认'],
                            btnclass: ['btn btn-primary'],
                        });
                    }
                    let index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }
            });
        }
    }


    formDeptAdd.validate({
        onkeyup: false,
        rules: {
            deptName: {
                remote: {
                    url: "/dept/checkDeptNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "parentId": function () {
                            return $("input[name='parentId']").val();
                        },
                        "deptName": function () {
                            return trim($("#deptName").val());
                        }
                    },
                    dataFilter: function (data) {
                        return data === "0";
                    }
                }
            },
            orderNum: {
                digits: true
            },
            email: {
                email: true,
            },
            phone: {
                isPhone: true,
            },
        },
        messages: {
            "deptName": {
                remote: "部门已经存在"
            }
        },
        focusCleanup: true
    });


    /*部门管理-新增-选择父部门树*/
    function selectDeptTree() {
        let height = ($(window).height() - 50) + 'px';

        layer.open({
            type: 2,
            area: ['380px', height],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: "部门选择",
            content: "/dept/selectDeptTree/" + $("#treeId").val(),
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            yes: function (index) {
                doSubmit(index)
            },
            cancel: function () {
                return true;
            }
        });
    }

    function doSubmit(index) {
        let body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }


</script>
</body>
</html>
